<template>
  <div>
    <div class="!text-[blue] font-bold">111</div>
    <h2 class="cursor-pointer">{{ $t('messages.hello') }}</h2>
    <p>{{ $t('messages.name') }}</p>
    {{ userStore.count }}

    <div class="language-switcher">
      <button :class="{ active: currentLocale === 'en' }" @click="setLocale('en')">英语</button>
      <button :class="{ active: currentLocale === 'ja' }" @click="setLocale('ja')">日本語</button>
      <button @click="userStore.addCountHandle()">新增</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import { uerStore } from './stores'

const userStore = uerStore()

// 使用vue-i18n的组合API
const { locale } = useI18n()
const currentLocale = computed(() => locale.value)

const setLocale = (newLocale: string) => {
  locale.value = newLocale
}

// 使用vue-i18n的组合API
</script>

<style scoped>
.i18n-example {
  padding: 20px;
}

.language-switcher button {
  margin-right: 10px;
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: red;
  cursor: pointer;
}

.language-switcher button.active {
  background: #007bff;
  color: white;
}
</style>
